<template>
  <div>
    <public-head title="我的物业"></public-head>

    <yd-tab horizontal-scroll>
      <yd-tab-panel label="房产">
        <yd-grids-group
          :rows="2"
          :title="house.home_code"
          v-if="houseList.length"
          v-for="house in houseList"
          :key="house.id"
        >
          <yd-grids-item>
            <span slot="text">业主：{{house.owner}}</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">小区：{{house.project}}</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">楼栋：{{house.storied}}</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">单元：{{house.unit}}</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">楼层：{{house.floor}}</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">产权证号：{{house.property_no}}</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">建筑面积：{{house.construct_area|areaFilter}}</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">合同面积：{{house.contract_area|areaFilter}}</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">套内面积：{{house.indoor_area|areaFilter}}</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">公摊面积：{{house.shared_area|areaFilter}}</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">产权面积：{{house.property_area|areaFilter}}</span>
          </yd-grids-item>
        </yd-grids-group>
      </yd-tab-panel>
      <yd-tab-panel label="车位">
        <yd-grids-group
          :rows="2"
          :title="carpark.car_park_no"
          v-if="carParkList.length"
          v-for="carpark in carParkList"
          :key="carpark.id"
        >
          <yd-grids-item>
            <span slot="text">业主：{{carpark.owner}}</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">车场：{{carpark.car_yard}}</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">车位名：{{carpark.car_park_name}}</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">车牌号：{{carpark.car_no}}</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">车品牌：{{carpark.car_brand}}</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">开始使用时间：{{carpark.start_time|dateTimeFilter}}</span>
          </yd-grids-item>
        </yd-grids-group>
      </yd-tab-panel>
    </yd-tab>

    <loading v-if="is_loading"></loading>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  components: {},
  data() {
    return {
      houseList: [],
      carParkList: []
    };
  },
  created() {
    this.fetchHouseList();
    this.fetchCarParkList();
  },
  filters: {
    areaFilter(value) {
      if (value) {
        return value + " ㎡";
      }
      return "";
    },
    dateTimeFilter(date) {
      if (date != null) {
        console.log(date);
        return moment(date).format("YYYY-MM-DD HH:mm");
      } else {
        return "";
      }
    }
  },
  methods: {
    fetchHouseList() {
      this.isLoading(true);
      this.axios
        .post(root + "/api/member/houseList", { token: this.token })
        .then(res => {
          this.isLoading(false);
          this.houseList = res.data.data;
        });
    },
    fetchCarParkList() {
      this.isLoading(true);
      this.axios
        .post(root + "/api/member/carParkList", { token: this.token })
        .then(res => {
          this.isLoading(false);
          this.carParkList = res.data.data;
        });
    },
    ...mapActions(["isLoading"])
  },
  computed: {
    ...mapState(["is_loading", "token"])
  }
};
</script>

<style lang="less" scoped>
@import "../../common/style/mixin.less";

.ivu-row {
  padding: 0.24rem 0.35rem;
  box-shadow: 0 3px 5px 0 #d0d0d0;
  background: #fff;
  margin-top: 0.2rem;
  p {
    padding: 1px 0;
  }
}

.related-spare-part {
  .init;
}
</style>